<section data-meeting-agenda>
  <div class="meeting__agenda-title">
    <%= icon "list-ordered" %>
    <h2 class="h4"><%= translated_attribute(meeting.agenda.title) %></h2>
  </div>

  <% agenda_items_times = calculate_start_and_end_time_of_agenda_items(meeting.agenda.agenda_items.first_class, meeting) %>
  <% meeting.agenda.agenda_items.first_class.each_with_index do |agenda_item, index| %>
  <div class="meeting__agenda-item">
    <h3 class="meeting__agenda-item__title">
      <span><%= translated_attribute(agenda_item.title) %></span>
      <span><%= display_duration_agenda_items(agenda_item.id, index, agenda_items_times) %></span>
    </h3>

    <div class="meeting__agenda-item__description editor-content"><%= render_meeting_sanitize_field(agenda_item, :description) %></div>

    <% if agenda_item.agenda_item_children.presence %>
      <% parent_start_time = agenda_items_times[index][:start_time] %>
      <% agenda_item_children_times = calculate_start_and_end_time_of_agenda_items(agenda_item.agenda_item_children, meeting, parent_start_time) %>

      <% agenda_item.agenda_item_children.each_with_index do |agenda_item_child, index_child| %>
        <div class="meeting__agenda-subitem">
          <h4 class="meeting__agenda-item__title">
            <span><%= translated_attribute(agenda_item_child.title) %></span>
            <span><%= display_duration_agenda_items(agenda_item_child.id, index_child, agenda_item_children_times) %></span>
          </h4>
          <div class="meeting__agenda-item__description"><%= render_meeting_sanitize_field(agenda_item_child, :description) %></div>
        </div>
      <% end %>
    <% end %>
  </div>
  <% end %>
</section>
